<template>
  <el-row class="tac">
    <el-col style="width: 220px">
      <el-menu
          :default-active="activeIndex"
          class="el-menu-vertical-demo"
      >
        <el-sub-menu index="/info">
          <template #title>
            <el-icon>
              <Avatar/>
            </el-icon>
            <span>宿舍信息</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/userInfo" @click="getUserInfo()">个人中心</el-menu-item>
            <el-menu-item v-show="show" index="/info" @click="info()">信息查询</el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>
        <el-sub-menu index="/pay">
          <template #title>
            <el-icon>
              <WalletFilled/>
            </el-icon>
            <span>宿舍水电</span>
          </template>
          <el-menu-item-group>
            <el-menu-item v-show="showTwo" index="/dept" @click="dept()">楼栋管理</el-menu-item>
            <el-menu-item index="/pay" @click="pay()">水电查缴</el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>
        <el-sub-menu index="/guarantee">
          <template #title>
            <el-icon>
              <BellFilled/>
            </el-icon>
            <span>宿舍保修</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/guarantee" @click="guarantee()">保修上报</el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>
        <el-sub-menu index="/stay" v-show="show">
          <template #title>
            <el-icon>
              <List/>
            </el-icon>
            <span>宿舍晚归</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/stay" @click="stay()">晚归管理</el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>
      </el-menu>
    </el-col>
  </el-row>
</template>

<script>

import {WalletFilled, Tools, Avatar, List, BellFilled} from "@element-plus/icons"
import axios from "axios";

export default {
  name: "menu",
  components: {
    WalletFilled, Tools, Avatar, List, BellFilled
  },
  data() {
    return {
      activeIndex: "",
      userInfo: {},
      show: true,
      showTwo: true
    }
  },
  created() {
    this.activeIndex = this.$route.fullPath
    axios({
      url: `http://localhost:8888/user/info`,
      method: "post",
      headers: {
        token: localStorage.getItem("token")
      }
    }).then((res) => {
      this.userInfo = res.data
      if (this.userInfo.roleId != 3) {
        this.show = true
      } else {
        this.show = false
      }
      if (this.userInfo.roleId == 1) {
        this.showTwo = true
      }else{
        this.showTwo = false
      }
    })
  },
  methods: {
    pay() {
      this.$router.push("/pay")
    },
    dept() {
      this.$router.push("/dept")
    },
    guarantee() {
      this.$router.push("/guarantee")
    },
    info() {
      this.$router.push("/info")
    },
    stay() {
      this.$router.push("/stay")
    },
    getUserInfo() {
      this.$router.push("/userInfo")
    }
  },
}
</script>

<style scoped>

</style>